import React, {Component, Fragment} from 'react';
import {inject, observer} from 'mobx-react';
import {toJS} from "mobx";
import {
    WeaLocaleProvider,
    WeaTab,
    WeaDialog,
    WeaNewScroll,
    WeaMoreButton,
    WeaRightMenu,
    WeaLeftRightLayout,
} from "ecCom";
import {Button, Spin} from "antd";
import NoRightComponent from '../NoRightComponent.js';
import ActionSetting from './ActionSetting';
import BaseInfoSetting from './BaseInfoSetting';
import MouldSetting from './MouldSetting';
import PublicMultiVersion from './PublicMultiVersion';
import * as IconConstant from '../../constant/IconConstant.js';
import LanguageConstant from '../../constant/LanguageConstant';
import * as Constant from '../../constant/Constant';
import "../../style/workflowSetting.less";

const {getLabel} = WeaLocaleProvider;

@inject("workflowSettingStore")
@observer
class WorkflowSetting extends Component {

    componentDidMount() {
        const {workflowId, workflowSettingStore} = this.props;
        workflowSettingStore.resetWorkflowSetting();
        workflowSettingStore.init({workflowId});
        workflowSettingStore.getBaseInfoSettingForm();
    }

    componentWillReceiveProps(nextProps, nextContext) {
        const {workflowSettingStore} = this.props;
        const {workflowId} = nextProps;
        if (workflowId != this.props.workflowId) {
            workflowSettingStore.resetWorkflowSetting();
            workflowSettingStore.init({workflowId});
            workflowSettingStore.getBaseInfoSettingForm();
        }
    }

    render() {
        const {workflowSettingStore, changeWorkflowSettingTabKey} = this.props;
        const {
            loading, selectedTabKey, onTabChange, isMultiVersion, multiVersionTitle, showMultiVersion, triggerMultiVersion, multiVersionTab,
            chooseWorkflowVersion, authorized
        } = workflowSettingStore;
        if (!authorized) {
            return (<NoRightComponent/>);
        }
        const tabDatas = this.getTabDatas();
        return (
            <div className="workflow-setting-component">
                <Fragment>
                    <WeaRightMenu datas={this.getDropMenuDatas()}>
                        <Spin spinning={loading}>
                            <WeaTab
                                datas={tabDatas}
                                keyParam="viewcondition" //主键
                                selectedKey={selectedTabKey}
                                onChange={tabKey => {
                                    onTabChange(tabKey);
                                    changeWorkflowSettingTabKey(tabKey);
                                }}
                                tabBarExtraContent={isMultiVersion ?
                                    <div className="version-tab-container"><a onClick={() => {
                                        triggerMultiVersion(this.resizeHeight.bind(this));
                                    }}>{multiVersionTitle}</a></div> : ''}
                            />
                            {showMultiVersion &&
                            <div>
                                <PublicMultiVersion
                                    datas={multiVersionTab}
                                    keyTitle={multiVersionTitle}
                                    style={{width: '400px', height: '230px'}}
                                    clickItem={(versionInfo, title) => {
                                        chooseWorkflowVersion(versionInfo.workflowId);
                                        triggerMultiVersion(this.resizeHeight.bind(this));
                                    }}
                                    ref={'publicMultiVersion'}
                                />
                            </div>
                            }
                            <div className="workflow-setting-tabpage">
                                <WeaNewScroll height={'100%'}>
                                    {this.getContent()}
                                </WeaNewScroll>
                            </div>
                        </Spin>
                    </WeaRightMenu>
                </Fragment>
            </div>
        );
    }

    resizeHeight() {

    }

    /**
     * 按钮
     *
     * @returns {Array}
     */
    getDropMenuDatas = () => {
        const {workflowSettingStore} = this.props;
        const {saveWorkflowSetting, selectedTabKey, loading} = workflowSettingStore;
        const dropMenuDatas = [];
        if (selectedTabKey != Constant.WORKFLOW_SETTING_TAB_MOULDSETTING) {
            dropMenuDatas.push({
                key: '1',
                disabled: toJS(loading),
                icon: <i className='icon-coms-Preservation'/>,
                content: getLabel(LanguageConstant.SAVE, "保存"),
                onClick: key => {
                    saveWorkflowSetting();
                },
            });
        }
        return dropMenuDatas;
    }


    /**
     * 获取TAB页内容
     *
     * @returns {*}
     */
    getContent() {
        const {workflowSettingStore} = this.props;
        const {selectedTabKey} = workflowSettingStore;
        if (selectedTabKey == Constant.WORKFLOW_SETTING_TAB_BASEINFO) {
            return <BaseInfoSetting/>
        } else if (selectedTabKey == Constant.WORKFLOW_SETTING_TAB_MOULDSETTING) {
            return <MouldSetting/>
        } else if (selectedTabKey == Constant.WORKFLOW_SETTING_TAB_ACTIONSETTING) {
            return <ActionSetting/>
        }
        return (<div className="workflow-setting-nonetabpage"></div>)
    }

    /**
     * 获取Tab页签
     *
     * @returns {{title: *, viewcondition: string}[]}
     */
    getTabDatas() {
        const tabDatas = [
            {
                title: getLabel(LanguageConstant.BASE_INFO, '基本信息'),
                viewcondition: Constant.WORKFLOW_SETTING_TAB_BASEINFO
            }, {
                title: getLabel(LanguageConstant.MOULD_SETTING, '模板设置'),
                viewcondition: Constant.WORKFLOW_SETTING_TAB_MOULDSETTING
            }, {
                title: getLabel(LanguageConstant.ACTION_SETTING, '动作设置'),
                viewcondition: Constant.WORKFLOW_SETTING_TAB_ACTIONSETTING
            },
        ];
        return tabDatas;

    }

}

export default WorkflowSetting;